<template>
  <div class="panel">
        <!-- 封装左后两侧可拖拽改变宽度的面板组件 -->
        <!-- 拖拽随意改变三个盒子的宽度：挤压或者拉开  -->

        <div class="panel-left" :style="{'width':leftWidth+'px'}">
            <slot name="left"></slot>
        </div>
        
        <div class="resize-left" :style="{'left':leftWidth+'px'}" @mousedown="resizeLeft"></div>

        <div class="panel-center" :style="{'width':centerWidth,'backgroundColor':bgcolor}">
            <slot name="center"></slot>
        </div>

        <div class="resize-right" :style="{'right':rightWidth+'px'}" @mousedown="resizeRight"></div>

        <div class="panel-right" :style="{'width':rightWidth+'px'}">
            <slot name="right"></slot>
        </div>
  </div>
</template>

<script>
export default {
    name:'layout',
    data() {
        return {
            leftWidth: 250,
            centerWidth: '100%',
            rightWidth: 250,
            bgcolor: 'yellowgreen'
        }
    },
    methods:{
        resizeLeft(event) {//左侧侧边栏托移
            //调用方法时不传参，但方法本身带参，就会自动调用浏览器的$event对象
            // console.log(event);
            // 如何改变左侧侧边栏的宽度leftWidth，根据按下事件后，触发鼠标移动事件，拿到任意时刻鼠标的坐标，即left值，即侧边栏宽度
            document.onmousemove = (e) => {
                let left = e.clientX;
                this.leftWidth = left;
            }
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        },
        resizeRight(event) {//右侧侧边栏托移
            //右侧边栏的宽度right为屏幕宽 - 鼠标X坐标
            // console.log(event.currentTarget);
            console.log(event);
            // console.log(event.pageX);
            document.onmousemove = (e) => {
                // console.log(e);
                let right = event.clientX - e.clientX;
                this.rightWidth = right;
            }
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    }
}
</script>

<style scoped>
.panel {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;/* 让盒子高度占满屏幕 */
    background: transparent;
    display: flex;
    justify-content: space-around;
}
.panel-left {
    /* width: 20%; */
    background: #dedede;
}
/* .panel-center { */
    /* width: 60%; */
    /* background: yellowgreen; */
/* } */
.panel-right {
    /* width: 20%; */
    background: #dedede;
}
.resize-left,
.resize-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    background: red;
    cursor: w-resize;
}
</style>
  